<template>
	<div>
		<div class="poetry-content" :style="{backgroundImage:'url('+(articleContent.background?
			articleContent.background:'https://cdn.jy520.fun/yr/1242094775990095872.jpg')+')'}">
			<h1 class="poetry-title">{{articleContent.title}}</h1>
			<div class="poetryt-lang">
				
				<span class="bot">——   {{articleContent.author}}</span>
			</div>
			<div class="poetry-info">
				<p v-html="articleContent.contentFormat"></p>
			</div>
			<div class="poetry-foot">
				<time class="bot">{{articleContent.createTime|dateformatDate}}</time>
			</div>
			<Spin size="large" fix v-if="spinShow"></Spin>
		</div>
		
		<CommentVssueGithub :title="'笔中墨评论||id:'+$route.query.id"></CommentVssueGithub>
	</div>
</template>

<script>
import CommentVssueGithub from '@/components/common/CommentVssueGithub.vue'
export default {
  name: 'PoetryContent',
  components: {
	CommentVssueGithub
  },
  data:()=>{
	return{
		articleContent:{},
		spinShow:false,
	}  
  },
  props: {
  },
  methods:{
	getArticleById(){
		let id = this.$route.query.id;
		this.spinShow = true;
		this.$http.get('/api/article/getArticleById',{params:{id:id}}).then(res=>{
			this.articleContent = res;
			this.spinShow = false;
		})
	} 
  },
  computed:{
  },
  created() {
	this.getArticleById();
  }
}
</script>

<style scoped="scoped" lang="stylus">
.poetry-content
	background-size cover
	background-position center
	background-repeat no-repeat
	min-height 20vh
	padding 20px 20px
	border-radius 10px
	box-shadow 0 0 0 1px rgba(0,0,0,.02), 0 4px 10px rgba(0,0,0,.06)
	position relative
	overflow hidden
	text-align center
	.poetry-title
		font-size 24px
		color #444
		margin-bottom 10px
		line-height 42px
		font-weight 400
		padding-top 30px
		text-transform none
		letter-spacing: 2px
	.poetryt-lang
		padding-left 42px
		font-size 14px
	.poetry-info
		padding-top 20px
		line-height 36px
		font-size 18px
		letter-spacing 1px
	.poetry-foot
		width 100%
		text-align right
		margin-top 60px
</style>
